import * as React from 'react'
import './App.css'
import { Input, Button } from 'antd'
import ListComponent, { IListItem } from './components/List'
import ModalComponent from './components/Modal'

interface IProps {}
interface IState {
  inputValue: string
  data: IListItem[]
  finishData: IListItem[]
  visible: boolean
  currentId: number
}
let index = 1
class App extends React.PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.getValue = this.getValue.bind(this)
    this.handleAdd = this.handleAdd.bind(this)
    this.showModal = this.showModal.bind(this)
    this.onCancel = this.onCancel.bind(this)
    this.onOk = this.onOk.bind(this)
  }
  readonly state: IState = {
    inputValue: '',
    data: [],
    finishData: [],
    visible: false,
    currentId: 0
  }
  private getValue(e: any) {
    this.setState({
      inputValue: e.target.value
    })
  }
  /**
   * 新增待办事项
   */
  private handleAdd(inputValue: string) {
    const date = new Date()
    const listItem: IListItem = {
      id: index++,
      date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
      content: inputValue
    }
    // console.log(listItem)
    // this.state.data.push(listItem)
    this.setState(state => ({
      data: [...state.data, listItem],
      inputValue: ''
    }))
  }
  private showModal(id: number): void {
    this.setState({
      visible: true,
      currentId: id
    })
  }
  private onOk(): void {
    // 确定完成
    const index = this.state.data.findIndex(
      (item: any) => item.id === this.state.currentId
    )
    console.log(index)

    // setState为异步更新 保留上次状态传参函数
    this.setState(state => ({
      finishData: [...state.finishData, this.state.data[index]]
    }))
    this.setState(state => {
      state.data.splice(index, 1)
      return {
        data: [...state.data]
      }
    })
    this.onCancel()
    console.log('确定完成')
  }
  private onCancel(): void {
    this.setState({
      visible: false
    })
    console.log('取消')
  }
  private getModal(): JSX.Element {
    return (
      <ModalComponent
        onOk={this.onOk}
        onCancel={this.onCancel}
        visible={this.state.visible}
      ></ModalComponent>
    )
  }
  public render() {
    return (
      <div className="App">
        {this.getModal()}
        <header className="App-header">
          <h1 className="App-title">
            <b>Todo</b> List
          </h1>
        </header>
        <div className="todo_add">
          <Input
            value={this.state.inputValue}
            onChange={this.getValue}
            onPressEnter={() => this.handleAdd(this.state.inputValue)}
            placeholder="添加待办事项"
            className="todo_add_input"
          />
          <Button
            type="primary"
            onClick={() => this.handleAdd(this.state.inputValue)}
          >
            增加
          </Button>
        </div>
        <div className="todo_content">
          <ListComponent
            data={this.state.data}
            showModal={this.showModal}
            finishData={this.state.finishData}
          />
        </div>
      </div>
    )
  }
}

export default App
